<!--
  @author: lc
  @desc: 数据源树通用组件
  @date: 2020-7-25
-->
<template>
  <div>
    <el-input v-model="filterText" style="margin-bottom: 5px;"
              placeholder="输入过滤关键字"
              clearable
              prefix-icon="el-icon-search"
              maxlength="30"></el-input>
    <el-scrollbar :style="{ height: (mHeight || domHeight) + 'px'}">
      <el-tree
        :data="srcList"
        :props="srcListProps"
        node-key="id"
        :default-expanded-keys="expandedKeys"
        :auto-expand-parent="false"
        @node-click="nodeClick"
        @node-expand="nodeExpandHandle"
        @node-collapse="nodeCollapseHandle"
        :filter-node-method="filterNode"
        v-loading="loading"
        ref="tree"
        :expand-on-click-node="false"
        :highlight-current="true">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <div class="node-icon">
            <icon-svg v-if="data.type==='1'" name="table"></icon-svg>
            <icon-svg v-else-if="node.level===3" name="datasource"></icon-svg>
            <div v-else-if="node.level<3">
              <svg-icon icon-class="icon-opened" v-show="node.expanded"></svg-icon>
              <svg-icon icon-class="icon-closed"
                        v-show="!node.expanded"></svg-icon>
            </div>
            <div v-else-if="node.level>=4">
              <svg-icon icon-class="icon-opened" v-show="node.expanded"></svg-icon>
              <svg-icon icon-class="icon-closed"
                        v-show="!node.expanded"></svg-icon>
            </div>
          </div>
          <div>
            {{ data.name }}
            <!--{{ data.name + (node.level < 3 ? ' (' + (data.children ? data.children.length : 0) + ')' : '')}}-->
          </div>
        </div>
    </el-tree>
    </el-scrollbar>
  </div>
</template>

<script>
  import { treeDataTranslate } from '../../../../utils/index';

  export default {
    props: {
      srcID: {
        type: String
      },
      mHeight: Number
    },
    watch: {
      filterText (val) {
        this.$refs.tree.filter(val)
      }
    },
    computed: {
      domHeight: {
        get () {
          return this.$store.state.common.documentClientHeight - this.$BODY_MARGIN - 56
        }
      }
    },
    data () {
      return {
        loading: true,
        srcList: [],
        expandedKeys: [],
        filterText: '',
        title: '',
        srcListProps: {
          label: 'name',
          children: 'children'
        }
      }
    },
    created () {
      this.init()
    },
    // activated () {
    //   this.init()
    // },
    methods: {
      // 可能携带ID
      init (id) {
        if (id) {
          this.srcID = id
        }
        this.srcID = this.srcID || ''
        this.loading = true
        this.$http({
          url: this.$http.adornUrl(`/src/source/tree`),
          method: 'get'
        }).then(({data}) => {
          if (data && data.code === 0) {
            data.tree.push({
              id: '0',
              parentId: '-1',
              name: '全部',
              remark: '全部',
              type: null
            })
            this.srcList = treeDataTranslate(data.tree)
            if (this.srcList[0].children) {
              if (this.expandedKeys.length === 0) {
                this.expandedKeys.push('0')
              }
              this.$nextTick(() => {
                if (this.srcID) {
                  var curNode = this.$refs.tree.getNode(this.srcID)
                  this.expandedKeys.push(curNode.data.parentId)
                  this.$refs.tree.setCurrentKey(this.srcID)
                } else {
                  this.srcID = this.srcList[0].id
                  this.$refs.tree.setCurrentKey(this.srcList[0].id)
                }
                const node = this.$refs.tree.getNode(this.srcID)
                this.title = node.data.name
                this.nodeClick(node.data, node)
              })
            }
          } else {
            this.srcList = []
          }
          this.loading = false
        })
      },
      /***
       * 外部设置节点选择
       * @param id
       */
      extSetChecked (id) {
        this.srcID = id
        var curNode = this.$refs.tree.getNode(this.srcID)
        this.expandedKeys.push(curNode.data.parentId)
        this.$refs.tree.setCurrentKey(this.srcID)
        this.nodeClick(curNode.data, curNode)
      },
      nodeClick (data, node) {
        this.$emit('nodeClick', data, node)
      },
      // 关键词过滤
      filterNode (value, data) {
        if (!value) return true
        data.remark = data.remark || ''
        return data.name.indexOf(value) !== -1 || data.remark.indexOf(value) !== -1
      },
      nodeExpandHandle (data) {
        this.expandedKeys.push(data.id)
      },
      nodeCollapseHandle (data) {
        var _this = this
        this.expandedKeys.forEach(function (item, index, arr) {
          if (item === data.id) {
            _this.expandedKeys.splice(index, 1)
          }
        })
      }
    }
  }
</script>
